<!--
 * @Author: ylyu
 * @Date: 2024-02-22 12:22:38
 * @LastEditors: ylyu
 * @LastEditTime: 2024-02-23 11:18:21
 * @Description: 
-->
<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title></title>
    <style>
      .login-wrapper {
        color: #fff;
        font-size: 16px;
        margin: 0 auto;
        text-align: center;
        margin-top: 60px;
      }
      .login-wrapper .title {
        color: #fff;
        padding-left: 10px;
      }
      .input-label {
        display: inline-block;
        width: 60px;
        text-align: right;
        padding-right: 10px;
        box-sizing: border-box;
      }
      .login-input {
        width: 260px;
        height: 35px;
        border-radius: 5px;
        border: none;
        background-color: #eee;
      }
      .login-btn {
        width: 180px;
        height: 40px;
        border-radius: 5px;
        background-color: #6c5dd3;
        color: #fff;
        font-size: 16px;
        border: none;
      }
      .login-checkbox {
        font-size: 14px;
      }
      .login-checkbox .input-label {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="login-wrapper">
      <div style="display: flex; justify-content: center; align-items: center">
        <img src="./public/douyin.png" width="55" />
        <h1 class="title">AI智能场控</h1>
      </div>

      <!-- 输入用户名和密码的表单 -->
      <form id="loginForm" action="#" method="post" onsubmit="return false;">
        <p>
          <label class="input-label">用户名</label>
          <input
            class="login-input"
            type="text"
            name="username"
            placeholder="请输入用户名"
          />
        </p>
        <p>
          <label class="input-label">密码</label
          ><input
            class="login-input"
            type="password"
            name="password"
            placeholder="请输入密码"
          />
        </p>
        <p class="login-checkbox">
          <label class="input-label"></label>
          <span style="width: 275px; display: inline-block; text-align: left">
            <input type="checkbox" name="rememberMe" />记住密码
          </span>
        </p>
        <button class="login-btn" id="submitBtn" type="button">登 录</button>
      </form>
    </div>

    <script src="./login-renderer.js"></script>
  </body>
</html>
